// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.


$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';


@import '~@mozilla-protocol/core/protocol/css/includes/lib';

.mofo-donate-promo {
    font-family: var(--body-font-family);
    padding-top: 0;

    .feature-wrapper {
        border-radius: $border-radius-md;
        background: $color-violet-05;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: $spacing-lg $spacing-2xl;
    }

    img {
        width: 160px;
    }

    small {
        @include text-body-md;
        text-transform: uppercase;
        color: $color-moz-pink-dark;
        font-weight: bold;
        margin: $spacing-md 0;
        display: block;
        text-align: center
    }

    h2 {
        @include text-title-xs;
        font-family: var(--body-font-family);
        font-weight: bold;
        text-align: center;
        margin: $spacing-lg 0;
    }

    a {
        @include text-body-lg;
        white-space: nowrap;
    }

    @media #{$mq-md} {
        .feature-wrapper {
            flex-direction: row;

            .feature-info {
                padding: $spacing-xl;
            }

            small {
                @include text-body-lg;
                margin-top: 0;
                @include bidi(((text-align, left, right),));
            }

            h2 {
                @include font-size(28px);
                @include bidi(((text-align, left, right),));
                margin: 0;
            }
        }
    }
}
